<template>
    <div class="border-r p-4 hidden md:block">
        <div class="p-4 rounded-lg hover:bg-gray-100 flex flex-col items-center" v-for="(item, index) in menu"
            :key="index">
            <div class="mb-2" :class="'fa fa-' + item.image"></div>
            <div class="text-sm">{{ item.title }}</div>
        </div>

    </div>
</template>
<script setup>
const menu = ref([{ image: 'yelp', title: '模板', link: '/ai/design' },
{ image: 'image', title: '元素', link: '/ai/image' },
{ image: 'file-text-o', title: '文字', link: '/ai/writer' },
{ image: 'meh-o', title: '素材', link: '/ai/writer' }])

</script>